import React, { FC, memo } from 'react';
import { WingBlank, List } from 'antd-mobile';
import { LoadMore } from '@/components';
import { timeFormat } from '@/utils';
import { IHouseCommentsProps } from '@/interface';

const Item = List.Item;
const Brief = Item.Brief;

const Banner: FC<IHouseCommentsProps> = props => {
  const { showLoadMore = true, list = [] } = props;

  return (
    <div className="comment">
      <WingBlank size="md">
        <h1 className="comment-title">评论</h1>
        <List className="comment-lists">
          {list.map((item, index) => (
            <Item
              key={`${item.id}${index}`}
              extra={
                <span className="extra">
                  {timeFormat(item.createTime, 'all')}
                </span>
              }
              align="top"
              wrap={true}
              thumb={<img className="avatar" src={item.user.avatar} />}
            >
              {item.user.username}
              <Brief>{item.msg}</Brief>
            </Item>
          ))}
        </List>
        <LoadMore show={showLoadMore} />
      </WingBlank>
    </div>
  );
};

export default memo(Banner);
